@charset "UTF-8";

* { /* 选中所有元素 *表示通配符 */
    padding: 0; /* 内边距：0 */
    margin: 0; /* 外边距：0 */
    color: #337ab7; /* 默认的颜色为蓝色#337ab7 */
}

h1 { /* 选中h1标签 */
    text-align: center; /* 文本居中 */
    margin-bottom: 10px;
}

a { /* 选中a标签 */
    text-decoration: none; /* 取消a默认的下划线 */
    color: #337ab7; /* 设置颜色 */
}

a:hover { /* 选中鼠标指向a标签时 */
    text-decoration: underline; /* 为a增加下划线 */
    color: orange; /* 设置颜色 */
}

#wrapper { /* 选中id=wrapper标签 */
    width: 1000px; /* 设置宽度 */
    border: 1px solid #337ab7; /* 设置边框 */
    margin: 20px auto; /* 设置外边距，上下为0，左右为auto达到居中效果 */
    padding: 20px; /* 设置内边距 */
}

#main { /* 选中id=main标签 */
    width: 68%; /* 选中宽度 */
    float: left; /* 向左浮动 */
}

#main h4 { /* 选中id=main标签里面的h4标签 */
    text-align: center;
}

#main p { /* 选中id=main标签里面的p标签 */
    text-indent: 36px;
    line-height: 36px;
}

#side {
    width: 28%;
    float: right;
}

#side p {
    font-size: 13px;
}

#side .box {
    padding: 10px;
    background-color: #eee;
}

#copyright {
    text-align: center; /* 文本居中 */
}

.clear { /* 选中class=clear的标签 */
    clear: both; /* 清除浮动 */
}